<script setup lang="ts">
import { PatientAuth } from '@/api/type/user';
import { deleteUserPatientAPI, getUserPatientAPI } from '@/api/user';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route=useRoute()
const router=useRouter()
//获取就诊人信息
const AuthList=ref<PatientAuth>()
const getPatientAuth=async()=>{
  const res=await getUserPatientAPI(route.query.id as string)
  AuthList.value=res.data
}
getPatientAuth()

//删除就诊人
const deletePatient=async()=>{
  await deleteUserPatientAPI(route.query.id as string)
  router.push('/user/patient')
}
</script>

<template>
  <div class="show">
   <div class="title">就诊人信息</div>
   <div class="sub_title">
      <div class="block"></div>
      就诊人信息
    </div>
   <div class="content">
      <el-form label-width="auto" >
        <el-form-item  label="姓名:">{{AuthList?.name}}</el-form-item>
        <el-form-item  label="证件类型:">{{AuthList?.param.certificatesTypeString}}</el-form-item>
        <el-form-item  label="证件号码:">{{AuthList?.certificatesNo}}</el-form-item>
        <el-form-item  label="性别:">{{AuthList?.sex===0?'女':'男'}}</el-form-item>
        <el-form-item  label="手机号码:">{{AuthList?.phone}}</el-form-item>
        <el-form-item  label="婚姻状况:">{{AuthList?.isMarry===1?'已婚':'未婚'}}</el-form-item>
        <el-form-item label="当前住址:">{{AuthList?.param.provinceString}}/{{ AuthList?.param.cityString }}/{{ AuthList?.param.districtString }}</el-form-item>
        <el-form-item label="详细地址:">{{AuthList?.address}}</el-form-item>
      </el-form>
    </div>
    <el-row type="flex" justify="center" align="middle">
      <el-col :span="12">
        <el-button style="height: 44px;" type="primary" @click="deletePatient">删除就诊人</el-button>
        <el-button style="height: 44px;color: #4490F1;" @click="router.push(`/user/patient/add?id=${route.query.id}`)">修改就诊人</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.show {
  .title {
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
  }
  .sub_title {
    display: flex;
    align-items: center;
    margin-top: 60px;
    color: #999;
    font-size: 14px;
    .block {
      width: 4px;
      height: 14px;
      margin-right: 6px;
      background-color: #4490F1;
      border-radius: 2px;
    }
    .card_tips {
      display: flex;
      align-items: center;
      padding-left: 10px;
      color: #ff5f5f;
      font-size: 12px;
      svg {
        margin-right: 3px;
      }
    }
  }
  .content {
    margin: 20px 0 0 140px;
    padding-bottom: 30px;
  }
}
</style>